<template>
	<div>
		<el-dialog
		  title="添加用户"
		  :visible.sync="dialogVisible"
		  :before-close="handleClose">
		  <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
		  	<el-form-item label="用户名" prop="userName">
		  		<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
		  	</el-form-item>
		  
		  	<el-form-item label="密码" prop="password">
		  		<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
		  	</el-form-item>
		  	<el-form-item>
		  		<el-button type="primary"  @click="dialogVisible = false">取 消</el-button>
		  	</el-form-item>
		  	<el-form-item>
		  		<el-button type="primary" @click="addUser('form')">确 定</el-button>
		  	</el-form-item>
		  </el-form>
		</el-dialog>
		<el-row type="flex" :gutter="10" class="row">
			<el-col :span="3">
				<el-button type="primary"  icon="el-icon-plus" @click="dialogVisible = true">增加</el-button>	
			</el-col>
			<el-col :span="3">
				<el-button type="primary" icon="el-icon-delete" @click="handleDelUserList">删除</el-button>
			</el-col>
			<el-col>
				<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="like"></el-input>
			</el-col>
			<el-col>
				<el-button type="primary" @click="search(like)" icon="el-icon-search">搜索</el-button>
			</el-col>
		</el-row>
		<el-row class="row">
			<el-col>
				<my-table :loading="loading" :handleSelectionChange="handleSelectionChange" :handleSizeChange="handleSizeChange" :pagination="pagination" :handleCurrentChange="handleCurrentChange" :tableData="tableData.list" :total="tableData.total"  :table="table">
				</my-table>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import myTable from "../../../components/myTable.vue"
	import {userTable} from "../../../plugins/tableHeader.js"
	import {getUserList,addUser,delUserList,getUserIdByUserName,addUserRole,delByUserIds} from "../../../plugins/server.js"

	
	export default {
		data() {
			return {
				like:"",
				loading:false,
				form: {
					userName: '',
					password: '',
				},
				pagination:{
					currentPage:1,
					pagesizes:5
				},
				tableData: {
					total: 100,
					pages: 25,
					list: []
				},
				table: [],
				idList:[],
				dialogVisible: false,
				rules: {
					userName: [{
						required: true,
						trigger: 'blur',
						message: '长度在6到16个字符',
						min: 6,
						max: 16,
					}],
					password: [{
						required: true,
						trigger: 'blur',
						message: '长度在6到16个字符',
						min: 6,
						max: 16,
					}],
				}
			}
		},
		methods: {
			updateUser(val){
				console.log(val)
			},
			addUser(form){			
				this.$refs[form].validate((valid) => {
					if (valid) {
						// 获取当前时间
						let currentTime = new Date();
						let data={
							"userName":this.form.userName,
							"password":this.form.password,
							"registrationDate":currentTime,
							"updateTime":currentTime
						}
						addUser(data).then(res=>{
							if(res.data.data===true){
								this.$message({
								    message: '添加成功',
								    type: 'success'
								 });
								 let userName={
									 userName:this.form.userName
								 }
								 getUserIdByUserName(userName).then(res=>{
									let userId=res.data.data;								
									let date=new Date();
									let userRole={
									 userId:userId,
									 roleId:0,
									 updateTime:date
									}
									addUserRole(userRole)
								});
								 this.dialogVisible = false;
								 this.loading=true;
								 this.getTableData("","","");
							}else{
								this.$message({
								    message: '添加失败',
								    type: 'warning'
								 });
							}
						})
						
					}else{
						this.$message({
						    message: '请按正确规则填写',
						    type: 'warning'
						 });
					}
				})
			},
			search(like) {
				this.loading=true
				console.log(like)
				this.getTableData("","",like)
			},
			 handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			},
			//选项控件改变时
			handleSelectionChange(val) {
				this.multipleSelection = val;
				let idList=[];
				let arr = val;
				for(let item of arr ){
					idList.push(item.id)
				}
				this.idList=idList
			},
			handleDelUserList(){	
				delUserList(this.idList).then(res=>{
					if(res.data.data){
						this.$message({
						    message: res.data.message,
						    type: 'success'
						 })	
						 //删除用户成功  userRole 删除所有---》userId的
						 delByUserIds(this.idList).then(res=>console.log(res.data))
						 this.loading=true
						 this.getTableData("","","")
					}else{
						this.$message({
							message:res.data.message,
							type: 'warning'
						})
					}
				})
			},
			//每页条数改变时触发 选择一页显示多少行
			handleSizeChange(val) {
				 this.pagination.currentPage = 1;
				 this.pagination.pagesizes = val;
				 this.loading=true;
				 this.getTableData("","","");
			 },
			 //当前页改变时触发 跳转其他页
			handleCurrentChange(val) {
				 this.pagination.currentPage = val;
				 this.loading=true
				 this.getTableData("","","");
			},
			getTableData(sortBy,isAsc,userName){
				let data={
					"pageNo": this.pagination.currentPage,
					"pageSize": this.pagination.pagesizes,
					"sortBy": sortBy,
					"isAsc": isAsc,
					"userName":userName
				}
				getUserList(data).then(res=>{
					this.tableData=res.data.data;
					this.loading=false;
				})
			}
		},
		components: {
			myTable
		},
		created() {
			this.table = userTable;
			this.loading=true
			this.getTableData("","","");
		}
	}
</script>

<style lang="less">
	.row {
		margin-top: 10px
	}

	
</style>